import Taro, { useState, useDidShow, usePullDownRefresh } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import _get from "lodash/get";

// components
import TabBar from '../../components/tabbar/index'

// utils
import getLoginInfo from "../../utils/getLoginInfo"
import getAvatarImgPrefix from '../../utils/getAvatarImgPrefix'

// api
import api from '../../api/index'

// style
import './index.scss'

export default function Points() {
  const [current, setCurrent ] = useState(0)
  const [rank, setRank] = useState({})
  const [ currentUser, setCurrentUser] = useState('')

  usePullDownRefresh(() => {
    initPage().then(() => {
      Taro.stopPullDownRefresh()
    })
  })

  useDidShow(async () => {
    const user = getLoginInfo();
    setCurrentUser(user.user.user_id)
    initPage()
  })

  const currentData = {
    0: 'userRankOfDay',
    1: 'userRankOfMonth',
    2: 'userRankOfTotal',
  }

  async function initPage() {
    const data = await api.score.getAllRank()
    if(data.code > 0) {
      const rankData = JSON.parse(data.data)
      console.log(rankData)
      setRank(rankData)
    }
  }

  return (
    <View className='points-page'>
      <View className='page-tabBar'>
        <TabBar
          values={['今日排行', '本月排行', '总排行']}
          current={current}
          onClick={value => setCurrent(value)}
          className='page-tabBar'
        />
      </View>

      <View className='champion-container'>
        <View className='award-container'>
          <View className='silver'>
            <Image src={require('../../assets/silver160X212@2x.png')} className='bg' />
            <Image
              src={
                getAvatarImgPrefix(_get(rank, [currentData[current], 'topUserRank', 1, 'avatar_url']))
              }
              className='avatar'
            />
          </View>

          <View className='score-container'>
            <Text className='name'>
              {
                _get(rank, [currentData[current], 'topUserRank', 1, 'nickname'])
              }
            </Text>
            <Text className='score'>
              <Text className='num'>
                {
                  parseInt((_get(rank, [currentData[current], 'topUserRank', 1, 'score']) || '0'), 10)
                }
              </Text>
              分
            </Text>
          </View>
        </View>

        <View className='award-container'>
          <View className='gold'>
            <Image src={require('../../assets/gold200X252@2x.png')} className='bg' />
            <Image
              src={
                getAvatarImgPrefix(_get(rank, [currentData[current], 'topUserRank', 0, 'avatar_url']))
              }
              className='avatar'
            />
          </View>

          <View className='score-container'>
            <Text className='name'>
              {
                _get(rank, [currentData[current], 'topUserRank', 0, 'nickname'])
              }
            </Text>
            <Text className='score'>
              <Text className='num'>
                {
                  parseInt((_get(rank, [currentData[current], 'topUserRank', 0, 'score']) || '0'), 10)
                }
              </Text>
              分
            </Text>
          </View>
        </View>

        <View className='award-container'>
          <View className='bronze'>
            <Image src={require('../../assets/bronze160X212@2x.png')} className='bg' />
            <Image
              src={
                getAvatarImgPrefix(_get(rank, [currentData[current], 'topUserRank', 2, 'avatar_url']))
              }
              className='avatar'
            />
          </View>

          <View className='score-container'>
            <Text className='name'>
              {
                _get(rank, [currentData[current], 'topUserRank', 2, 'nickname'])
              }
            </Text>
            <Text className='score'>
              <Text className='num'>
                {
                  parseInt((_get(rank, [currentData[current], 'topUserRank', 2, 'score']) || '0'), 10)
                }
              </Text>
              分
            </Text>
          </View>
        </View>

      </View>

      <View className='user-list-container'>
        {
          (_get(rank, [currentData[current], 'nearbyUserRank']) || []).map(item => (
            <View className={`user-container ${currentUser === item.userId ? 'current' : ''}`} key={item.userId}>
              <Text className='id'>{ item.rankIndex + 1 }</Text>
              <Image className='avatar' src={getAvatarImgPrefix(item.avatar_url)} />
              <Text className='name'>{item.nickname}</Text>
              <Text className='score'>{parseInt(item.score)}分</Text>
            </View>
          ))
        }
      </View>

    </View>
  )
}

Points.config = {
  navigationBarTitleText: '积分排行',
  enablePullDownRefresh: true
}
